<template>
    <div id="app-container" style="margin: 10px 50px">
      <el-form :inline="true" :model="student" class="demo-form-inline">
        <el-form-item label="学生姓名">
          <el-input v-model="FormData.username" placeholder="学生姓名"></el-input>
        </el-form-item>
    
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="default" @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
  
      <el-table :data="studentInfo" stripe style="width: 100%">
        <el-table-column prop="username" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180"> </el-table-column>
        <el-table-column prop="departmentName" label="学院名称" width="180">
            
        </el-table-column>
        <el-table-column prop="fullInfo" label="班级名称" width="200">
        </el-table-column> 

        <el-table-column prop="workStatusStr" label="实习情况">
        </el-table-column> 

        <el-table-column label="操作" width="230" align="center">
          <template slot-scope="scope">  
            <el-button @click="deleteInfo(scope.row)" type="danger" 
              >删除</el-button
            >

            <el-button @click="emailWarning(scope.row)" type="warning" 
              >邮箱通知</el-button
            >

          </template>
        </el-table-column>
      </el-table>
  
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="curPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>

      <!-- 上传按钮 以及配置dialog弹窗 -->
      <div class="el-toolbar">
        <div class="el-toolbar-body" style="justify-content: flex-start">
          <el-button type="text" @click="importData"
            ><i class="fa fa-plus" /> 导入</el-button
          >
        </div>
    </div>

    <el-dialog title="导入" :visible.sync="dialogImportVisible" width="860px">
      <el-form label-position="right" label-width="170px">
        <el-form-item label="文件">
          <el-upload
            :multiple="false"
            :data="teacherInfo"
            :on-success="onUploadSuccess"
            :action="'http://localhost:8222/admin/user/teacher/batchAddStudent'"
            class="upload-demo"
          >
            <span style="color:red;size: 12px;" >请上传 <i>仅有登录账号以及学生姓名的xls文件、请确保每位同学登录账号正确！</i>
              <img src="https://tianwenle.oss-cn-hangzhou.aliyuncs.com/test.jpg" alt="文件示例">
            </span>
            <h3 style="text-align: left;">
            </h3>
            <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传xls文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogImportVisible = false">取消</el-button>
      </div>
    </el-dialog>
    </div>
  </template>
  
  <script>
  
  import studentApi from "@/api/student";
  import teacherApi from "@/api/teacher"
  
  export default {
    data() {
      return {
        teacherInfo: {},
        dialogImportVisible: false,
        curPage: 1,
        pageSize: 10,
        total: 0,
        student: {
          username: "",
        },
        FormData: {
          departmentId: "",
          username: "",
          year: "",
          className: "",
          classNo: ""
        },
        studentInfo: [],
      };
    },
    created() {
      this.init();
      // 获取当前登录老师的id
      teacherApi.getByUsername().then(resp=>{
          console.log(resp.data.teacher.id);
          this.teacherInfo.id = resp.data.teacher.id;
          this.teacherInfo.departmentId = resp.data.teacher.departmentId;
      })
    },
    methods: {

      emailWarning(row){

       

        this.$prompt('请输入要通知的内容，我们会通过邮箱通知该同学', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          console.log(row,"row");
          console.log(value,"value");
            this.$notify({
              title: '邮箱通知',
              message: `已对${row.username}同学发送提示邮件`,
              type: 'success'
              });



       
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });

      },

      onUploadSuccess(response, file, fileList) {
       
       if(response.code === 20001){
          this.$notify.error({
          title: '错误',
          message: response.message
        });
       }else{
          this.$message.success("上传完成");
          this.init();
          this.dialogImportVisible = false;
       }
      
     
    },

    importData() {
      this.dialogImportVisible = true;
    },

      init() {
        // 查询当前老师下面所有的学生信息
        studentApi.getMyStudentList(this.pageSize,this.curPage,this.FormData).then(resp=>{
            this.total = resp.data.total;
            this.studentInfo = resp.data.list;
            
        })
      },
      onSubmit() {
        
        studentApi.getMyStudentList(this.pageSize,this.curPage,this.FormData).then(resp=>{
            this.total = resp.data.total;
            console.log(this.FormData);
            this.studentInfo = resp.data.list;
        })
      },
      clear() {
        (this.FormData = {});
        studentApi.getMyStudentList(this.pageSize,this.curPage,this.FormData).then(resp=>{
            this.total = resp.data.total;
            this.studentInfo = resp.data.list;
        })
      },
      deleteInfo(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            console.log(row.id);
            studentApi.deleteStudent(row.id).then(resp=>{
                studentApi.getMyStudentList(this.pageSize,1,this.FormData).then(resp=>{
                    this.total = resp.data.total;
                    this.studentInfo = resp.data.list;
                })
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
      },
      // 页数发生变化
      handleCurrentChange() {
        studentApi.getMyStudentList(this.pageSize,this.curPage,this.FormData).then(resp=>{
            this.total = resp.data.total;
            this.studentInfo = resp.data.list;
        })
      },
    },
  };
  </script>
  
  <style>

</style>
  